<script setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'
const route = useRoute()
// console.log(route.meta.hidden);
</script>

<template>
  <div class="top">
    <RouterView />
    <footer class="middle" v-if="!route.meta.hidden">
      <RouterLink to="/">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </RouterLink>
      <RouterLink to="/kind">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
      </RouterLink>
      <RouterLink to="/cart">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
      </RouterLink>
      <RouterLink to="/my">
        <span class="iconfont icon-My"></span>
        <p>个人页</p>
      </RouterLink>
    </footer>
  </div>
</template>


<style lang="scss">
html,
body,
#app,
.top {
  width: 100%;
  height: 100%;
}

html {
  font-size: 26.66666666666666vw;

  body {
    font-size: 14px;
  }
}

.top {
  display: flex;
  flex-direction: column;

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .header {
      width: 100%;
      height: 0.44rem;
      background-color: #f66;
      line-height: 0.44rem;
      text-align: center;
      color: white;
    }

    .content {
      overflow: auto;
    }
  }

  .middle {
    height: 0.5rem;
    border-top: 1px solid gray;
    display: flex;

    a {
      flex: 1;
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      color: black;
    }

    a.router-link-active {
      color: #f66;
    }
  }
}</style>
